<template>

  <div> 

    <el-dialog title="交易限制变更日志" :visible.sync="dialogVisible" width="70%" :close-on-click-modal="false">
    
      <!--主列表数据-->
      <d2-crud
        ref="d2Crud"
        :options="mainTable.options"
        :index-row="mainTable.indexRow"
        :columns="mainTable.columns"
        :data="mainTable.list"
        :selection-row="mainTable.allowSelect"
        :loading="mainTable.loading"
        @current-change="onMainCurrentChange"
        @custom-emit-handle-channel-limit-log="handleChannelLimitLog"
      ></d2-crud>

      <div slot="footer" class="dialog-footer">
        <el-button @click="close" size="small">关 闭</el-button>
      </div>

    </el-dialog>

    <dialog-channel-limit-log ref="dialog-channel-limit-log"></dialog-channel-limit-log>
  </div>

</template>

<script>

import ApiMain from '@/api/mch.info';
import DialogChannelLimitLog from './dialog-channel-limit-log';
export default {
  components: {
    'dialog-channel-limit-log': DialogChannelLimitLog,
  },
  mixins: [
  ],
  props: [
  ],
  data () {
    return {

      dialogVisible: false,
      mchNo: '',
      mainTable: {
        loading: false,
        options: {
          border             : true,
          stripe             : true,
          highlightCurrentRow: true,
          emptyText          : '暂无数据',
          size               : 'mini',
        },
        indexRow: null,
        allowSelect: false,
        columns: [
          {title: '商户号', key: 'mchNo', align: 'center', width: '150', showOverflowTooltip: true},
          {title: '通道名称', key: 'channelName', width: '150', align: 'center', showOverflowTooltip: true},
          {title: '单笔最小金额限制', key: 'amountMin', width: '150', align: 'center', showOverflowTooltip: true, formatter: this.formatPrice},
          {title: '单笔金额限制', key: 'amountLimit', width: '150', align: 'center', showOverflowTooltip: true, formatter: this.formatPrice},
          {title: '日交易笔数限制', key: 'dayCountLimit', width: '150', align: 'center', showOverflowTooltip: true},
          {title: '月交易笔数限制', key: 'monthCountLimit', width: '150', align: 'center', showOverflowTooltip: true},
          {title: '日交易总金额限制', key: 'dayAmountLimit', width: '150', align: 'center', showOverflowTooltip: true, formatter: this.formatPrice},
          {title: '月交易总金额限制', key: 'monthAmountLimit', width: '150', align: 'center', showOverflowTooltip: true, formatter: this.formatPrice},
          {title: '日交易总金额限制阈值', key: 'dayAmountThreshold', width: '150', align: 'center', showOverflowTooltip: true},
          {title: '月交易总金额限制阈值', key: 'monthAmountThreshold', width: '150', align: 'center', showOverflowTooltip: true},
          {title: '操作人', key: 'updateBy', align: 'center', width: '150', showOverflowTooltip: true},
          {title: '更新时间', key: 'updateTime', align: 'center', width: '150', showOverflowTooltip: true},
        ],
        // rowHandle: {
        //   width: '120',
        //   align: 'center',
        //   fixed: 'right',
        //   custom: [
        //     {
        //       text: '详情',
        //       type: 'primary',
        //       size: 'mini',
        //       emit: 'custom-emit-handle-channel-limit-log'
        //     }
        //   ]
        // },
        list: [],
        pagination: {
          currentPage: 1,
          pageSize   : 50,
          total      : 0,
          pageSizes  : [50, 100, 200]
        },
      },

    }
  },

  methods: {

  	show (mchNo = null) {

      this.mchNo = mchNo;

      this.fetchData();

      this.dialogVisible = true;
    },

    close () {
      this.dialogVisible = false;
      this.$emit('dialog-close');
    },

    formatPercent (row, col, val, index) {
      return (this.emptyToZero(val) / 100).toFixed(2) + '%';
    },

    formatPrice (row, col, val, index) {
      return (this.emptyToZero(val) / 100).toFixed(2);
    },

    emptyToZero (val = null) {
      return !val ? 0 : val;
    },

    fetchData () {
    	this.mainTable.loading = true;
    	ApiMain.channelMchConnLogList({ mchNo: this.mchNo })
      .then(re => {
      	this.mainTable.loading = false;
        this.mainTable.list = re;
      })
    },

    onMainCurrentChange (now, old) {
      this.mainTable.current = now;
    },

    handleChannelLimitLog ({index, row}) {
      if (this.mainTable.current) {
        this.$refs['dialog-channel-limit-log'].show(row.batchId);
      }
    }

  }

}
</script>
